<template>
  <div>
    <a-modal
      :width="872"
      :title="null"
      :visible="visible"
      :closable="false"
      :footer="null"
      class="success-modal"
    >
      <div style="height:532px;">
        <div style="display: flex;justify-content: space-between;align-items: center">
          <div style="font-weight: 500;font-size: 18px;color: #222B3C;display: flex;justify-content: space-between;align-items: center;gap: 0px 16px;">
            <div>
              验证计算公式
            </div>
            <div style="font-weight: 400;font-size: 14px;color: #97999C;">
              使用数学运算符编辑公式
            </div>
          </div>
          <div>
            <svg style="color: #97999C;font-size: 14px;cursor: pointer" class="icon" aria-hidden="true" @click="visible=false">
              <use xlink:href="#icon-cuowu"></use>
            </svg>
          </div>
        </div>
        <div style="width:100%;height: 180px;border: 1px solid #DEDFE3;border-radius: 8px;background: #FFFFFF;margin-bottom: 11px;">
          <div class="scroll-container" style="padding: 12px;height: 142px;display: flex;flex-wrap: wrap;gap: 4px;">
            <div
              style="padding: 12px;height: 118px;display: flex;flex-wrap: wrap;gap: 8px 4px;align-content: flex-start;"
            >
              <div class="handle" v-for="(item, index) in variablePool" :key="index">
                <div class="tag" v-if="['LogicalOperations','NumericOperators'].includes(item.type)" style="display: inline;height: 26px;background: #E8F2FF;border-radius: 6px;padding: 3px 8px;">
                  {{ item.key }}
                </div>
                <div class="tag" v-else-if="item.type==='variable'" style="display: inline;height: 26px;background: #FFFFFF;border-radius: 6px;border: 1px solid #E7E9F1;padding: 3px 8px;">
                  {{ item.key }}
                </div>
                <div class="tag" v-else-if="item.type==='constant'" style="display: inline;height: 26px;background: #FAFBFD;border-radius: 6px;border: 1px solid #DEDFE3;padding: 3px 8px;">
                  {{ item.key }}
                </div>
              </div>
            </div>
          </div>
          <div style="width:100%;height: 36px;padding: 8px 11px;display: flex;background: #FAFBFD;border-radius: 0px 0px 8px 8px;">
            <div style="font-weight: 400;font-size: 14px;color: #54607C;">公式预览：</div>
            <div style="font-weight: 400;font-size: 14px;color: #222B3C;height: 20px;width:510px">
              <!-- {{ preview }} -->
              <OverflowText style="font-weight: 500;" :text="preview" :maxWidth="'500px'"/>
            </div>
            <div v-if="isErrorShow" :style="{color:isError?'#F74949':'#2983FF'}" style="font-weight: 400;font-size: 14px;color: #F74949;line-height: 20px;">
              <a-button class="clearStyle" style="height: 20px;" type="link" @click="variablePool.forEach(item => { if (item.type === 'variable') item.parameters = ''; })">
                清空
              </a-button>
              <svg v-if="isError" style="color: red;font-size: 14px;" class="icon" aria-hidden="true">
                <use xlink:href="#icon-tishi1"></use>
              </svg>
              <svg v-else style="color: blue;font-size: 14px;" class="icon" aria-hidden="true">
                <use xlink:href="#icon-wanchengqueding1"></use>
              </svg>
              {{ isError?'公式错误，请重新编辑':'公式正确' }}
            </div>
          </div>
        </div>
        <div style="width:100%;height: 250px;border: 1px solid #DEDFE3;border-radius: 8px;background: #FFFFFF;margin-bottom: 11px;">
          <div style="width:100%;height: 36px;padding: 8px 11px;display: flex;background: #F1F7FF;border-radius: 8px 8px 0px 0px;">
            <div style="font-weight: 400;font-size: 14px;color: #54607C;">模拟字段验证是否成功</div>
          </div>
          <div
            class="scroll-container"
            style="padding: 12px;height: 200px;display: flex;flex-wrap: wrap;align-content: flex-start;"
          >
            <div v-for="(item, index) in variablePool" :key="index">
              <div v-if="item.type==='variable'" style="display: flex;align-content: center;align-items: center;gap:8px;margin-right: 52px;margin-bottom: 20px;">
                <div class="tag" style="display: inline;height: 26px;background: #FFFFFF;border-radius: 6px;border: 1px solid #E7E9F1;padding: 3px 8px;">
                  {{ item.key }}
                </div>
                <div>
                  <a-input v-model="item.parameters" style="width:263px" ></a-input>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="display: flex;justify-content: space-between;gap: 0px 8px;">
          <!-- @click="visible=false" -->
          <div style="cursor: pointer;background: #FFFFFF;border-radius: 4px;border: 1px solid red;color: red;line-height: 30px;padding: 0px 15px;" @click="test">
            <!-- 图标得换 -->
            <!-- @click="visible=false" -->
            <svg style="color: red;font-size: 14px;" class="icon" aria-hidden="true">
              <use xlink:href="#icon-cuowu"></use>
            </svg>
            验证公式
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
import OverflowText from '@/views/dashboard/OverflowText.vue'

export default {
  name: 'FormulaVerify',
  components: {
    draggable,
    OverflowText
  },
  data () {
    return {
      visible: false,
      variablePool: [],
      preview: '',
      isError: false,
      isErrorShow: false
    }
  },
  mounted () {
    this.isError = false
    this.isErrorShow = false
    this.previewAdd()
  },
  methods: {
    open (variablePool) {
      // 打开
      this.visible = true
      this.variablePool = variablePool
    },
    previewAdd () {
      // 生成预览
      let i = ''
      this.variablePool.map(item => {
        i += item.key
      })
      this.preview = i
    },
    isValidExpression (expression) {
      try {
        // 使用 eval 执行公式，确保它是一个合法的表达式
        // eslint-disable-next-line no-eval
        eval(expression)
        return true // 如果没有抛出异常，表示公式合法
      } catch (e) {
        return false // 如果抛出异常，表示公式无效
      }
    },
    test () {
      // 验证公式
      this.isError = false
      this.isErrorShow = true
      let i = ''
      this.variablePool.map(item => {
        if (item.type === 'variable') {
          i += item.parameters
        } else {
          i += item.key
        }
      })
      this.preview = i
      if (!this.isValidExpression(i)) {
        this.isError = true
      }
      console.log(i, '测试参数')
    }
  },
  watch: {
    variablePool: {
      handler (value) {
        this.previewAdd(value)
        this.isErrorShow = false
      },
      deep: true
    }
  }
}
</script>
<style lang="less" scoped>
  /deep/ .arco-modal{
    border-radius:16px
  }

  /deep/ .arco-modal-body {
    padding: 9px 24px;
  }

  // /deep/ .ant-radio-wrapper{
  //   margin-right:0px;
  // }

  // /deep/ .ant-input-group-addon{
  //   padding: 0px 4px;
  //   border-radius: 6px 0px 0px 6px;
  // }

  // /deep/ .ant-input-group > .ant-input:last-child, .ant-input-group-addon:last-child {
  //   border-radius: 0px 6px 6px 0px;
  // }

  .scroll-container {
      overflow-x: auto;  /* 禁用横向滚动条 */
      overflow-y: auto;    /* 允许纵向滚动条 */
      // overflow-x: hidden;  /* 禁用横向滚动条 */

  }

  .scroll-container::-webkit-scrollbar {
      width: 8px; /* 定义滚动条宽度 */
      height: 8px; /* 定义横向滚动条高度 */
  }

  .scroll-container::-webkit-scrollbar-thumb {
      background: #BCBDBE; /* 滚动条颜色，可调整 */
      border-radius: 999px; /* 滚动条圆角 */
  }

  .scroll-container::-webkit-scrollbar-track {
      display: none; /* 隐藏滚动槽 */
  }

  // .icon{
  //   cursor: pointer
  // }

  // .ghostClass{
  //   // background: red !important;
  // }

  // .dragClass{
  //   // background: rgb(0, 21, 214) !important;
  // }
</style>
